<div class="drawer-inquiry-content">

  <apes-collapse class="drawer-inquiry-collapse">

    <!--询价数据-->
    <apes-collapse-panel class="drawer-inquiry-collapse-panel" [apesHeader]="inquiryTitle" [apesActive]="true"
                         [apesShowArrow]="false">
      <ng-template #inquiryTitle>
        <div class="collapse-panel-title">询价数据</div>
      </ng-template>
      <!-- 商品展示 -->
      <div class="inquiry-data">

        <div class="inquiry-data-filter">
          <div *ngFor="let field of filterField,let i = index">
            <ng-container *ngIf="i != 0">
              <div apes-row class="inquiry-data-filtration-box">
                <div apes-col [apesSpan]="2" class="filtration-box-title">{{field.name}}:</div>
                <div apes-col [apesSpan]="22" class="filtration-box-type">
                  <ng-container *ngFor="let list of field.data">
                    <label apes-checkbox [(ngModel)]="list.checked" (ngModelChange)="checkFiltrationData()">
                      <span> {{list[field.type]}}</span>
                    </label>
                  </ng-container>
                </div>
              </div>
            </ng-container>
          </div>
        </div>

        <!--过滤-->
        <div class="inquiry-data-header">

          <div class="quotation">
            <button apes-button apesType="primary" class="quotation-btn" apesSize="small" (click)="getData();">刷新
            </button>
            <button apes-button apesType="primary" class="quotation-btn" apesSize="small" (click)="resetCondition()">
              重置
            </button>
          </div>

          <div class="showHidden">
            <div class="showHidden-icon" (click)="openShowHidden()">
              <i *ngIf="!showHidden" apes-icon apesType="eye-invisible"></i>
              <i *ngIf="showHidden" apes-icon apesType="eye"></i>
            </div>
          </div>

        </div>

        <!-- 遍历 -->
        <ng-container *ngIf="inquiryShowData.length != 0 && !inquiryLoading">
          <div class="inquiry-data-main" *ngFor="let item of inquiryShowData, let i = index">

            <ng-container *ngIf="item['item'].length != 0">

              <!-- 配件名称 -->
              <div class="inquiry-data-title" id="{{item['YSPID']}}">
                <span>{{i + 1}}</span>
                <span style="font-weight: bold;font-size: 16px">{{item['YPJMC']}}</span>
                <span>原：[{{item['YSPID']}}]{{item['YSPMC']}}</span>
              </div>

              <!-- 对应单个商品 -->
              <div class="inquiry-data-box">
                <ng-container *ngFor="let list of item['item'];let i1 = index;">

                  <div apes-row class="inquiry-data-box-main">

                    <div apes-col [apesSpan]="24" class="main-col">

                      <div apes-row>
                        <div apes-col [apesSpan]="11" class="main-col text-nowrap">[{{list.SPID}}] {{list.SPMC}}</div>
                        <div apes-col [apesSpan]="4" class="main-col">参考成本：
                          <span style="font-weight:bold;color: red">¥{{showHidden ? list.CGDJ : '****'}}</span>
                        </div>
                        <div apes-col [apesSpan]="4" class="main-col">建议售价： ¥{{list.XSDJ}}</div>
                        <ng-container *ngIf="list.GYSBZ">
                          <div apes-col [apesSpan]="5" class="main-col text-nowrap"
                               apes-tooltip [apesTooltipTitle]="titleTemplate">供应商备注：{{list.GYSBZ}}</div>
                          <ng-template #titleTemplate>
                            <span>{{list.GYSBZ}}</span>
                          </ng-template>
                        </ng-container>
                        <ng-container *ngIf="!list.GYSBZ">
                          <div apes-col [apesSpan]="5" class="main-col">供应商备注：--</div>
                        </ng-container>

                      </div>

                      <div apes-row>
                        <div apes-col [apesSpan]="11" class="main-col">{{list.HYMC}} {{list.purchaseInformation}}</div>
                        <div apes-col [apesSpan]="4" class="main-col">
                          <span>{{list.PZMC}}</span>
                          <span *ngIf="list.PZDY" apes-tooltip apesTooltipTitle="{{list.PZDY}}" class="tip">
                          <i apes-icon apesType="exclamation-circle"></i>
                        </span>
                        </div>
                        <div apes-col [apesSpan]="4" class="main-col">
                          <span>{{list.XFPZJC}}</span>
                          <span *ngIf="list.XFPZDY" apes-tooltip apesTooltipTitle="{{list.XFPZDY}}" class="tip">
                          <i apes-icon apesType="exclamation-circle"></i>
                        </span>
                        </div>
                        <div apes-col [apesSpan]="5" class="main-col">
                          供应商代码：{{list.supplier == 999999 ? '赋能外采' : list.supplier}}</div>
                      </div>
                    </div>

                  </div>


                </ng-container>
              </div>

            </ng-container>

          </div>
        </ng-container>
        <ng-container *ngIf="showInquiry && !inquiryLoading">
          <apes-empty style="text-align: center;"></apes-empty>
        </ng-container>
        <ng-container *ngIf="inquiryLoading">
          <apes-spin style="text-align: center;" apesSimple></apes-spin>
        </ng-container>
      </div>

    </apes-collapse-panel>

    <!--库存数-->
    <apes-collapse-panel class="drawer-inquiry-collapse-panel" [apesHeader]="inventoryTitle" [apesActive]="true"
                         [apesShowArrow]="false">
      <ng-template #inventoryTitle>
        <div class="collapse-panel-title">相关配件库存信息</div>
      </ng-template>

      <apes-table #basicTable
                  apesBordered
                  apesSize="small"
                  [apesLoading]="inventoryLoading"
                  [apesData]="inventoryData"
                  [apesFrontPagination]="false"
                  [apesShowPagination]="true"
                  [apesHideOnSinglePage]="true"
                  [apesTotal]="pagination.total"
                  [apesPageIndex]="pagination.currentPage"
                  [apesPageSize]="pagination.pageSize"
                  (apesPageIndexChange)="pageIndexChange($event)">
        <thead>
        <tr>
          <th class="collapse-panel-table-th" style="width: 25%;">商品名称</th>
          <th class="collapse-panel-table-th" style="width: 15%;">规格型号</th>
          <th class="collapse-panel-table-th" style="width: 15%;">本地库存</th>
          <th class="collapse-panel-table-th" style="width: 15%;">区域仓库存</th>
          <th class="collapse-panel-table-th" style="width: 15%;">总仓库存</th>
          <th class="collapse-panel-table-th" style="width: 15%;">参考成本</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of basicTable.data">
          <td class="collapse-panel-table-td">{{data.name}}</td>
          <td class="collapse-panel-table-td">{{data.specifications}}</td>

          <td class="collapse-panel-table-td">
            <span>{{data.stockAmount}}</span>
            <i apes-tooltip class="collapse-panel-tooltip"
               [apesTooltipTrigger]="'click'"
               [apesTooltipTitle]="stockAmountTooltipTemplate" apes-icon apesType="info-circle"></i>
            <ng-template #stockAmountTooltipTemplate>
              <span [innerHTML]="getStockAmountTooltipFormatter(data)"></span>
            </ng-template>
          </td>
          <td class="collapse-panel-table-td">
            <span>{{data.subStock}}</span>
            <i apes-tooltip class="collapse-panel-tooltip"
               [apesTooltipTrigger]="'click'"
               [apesTooltipTitle]="subStockTooltipTemplate" apes-icon apesType="info-circle"
               (click)="showStock(data)"></i>
            <ng-template #subStockTooltipTemplate>
              <span [innerHTML]="getStockTooltipFormatter(data,'area')"></span>
            </ng-template>
          </td>
          <td class="collapse-panel-table-td">
            <span>{{data.generalStock}}</span>
            <i apes-tooltip class="collapse-panel-tooltip"
               [apesTooltipTrigger]="'click'"
               [apesTooltipTitle]="generalStockTooltipTemplate" apes-icon apesType="info-circle"
               (click)="showStock(data)"></i>
            <ng-template #generalStockTooltipTemplate>
              <span [innerHTML]="getStockTooltipFormatter(data,'general')"></span>
            </ng-template>
          </td>

          <!--                    <td class="collapse-panel-table-td">{{data.stockAmount}}</td>-->
          <!--                    <td class="collapse-panel-table-td">{{data.subStock}}</td>-->
          <!--                    <td class="collapse-panel-table-td">{{data.generalStock}}</td>-->

          <td class="collapse-panel-table-td">¥{{data.referTax}}</td>
        </tr>
        </tbody>
      </apes-table>


    </apes-collapse-panel>

    <!--要货数据-->
    <apes-collapse-panel class="drawer-inquiry-collapse-panel" [apesHeader]="enquiryTitle" [apesActive]="true"
                         [apesShowArrow]="false">
      <ng-template #enquiryTitle>
        <div class="collapse-panel-title">要货数据</div>
      </ng-template>
      <apes-tabset class="inquiry-enquiryData">
        <apes-tab *ngFor="let tab of enquiryData" [apesTitle]="tab.title">
          <ng-container *ngFor="let data of tab.CDATA">
            <div apes-row class="inquiry-enquiryData-main">
              <div apes-col [apesMd]="24" class="timeline">

                <apes-timeline *ngIf="data.ITEM.length !=0 ">
                  <apes-timeline-item *ngFor="let item of data.ITEM;let i = index"
                  >{{getValueFormatter(item)}}
                  </apes-timeline-item>
                </apes-timeline>

                <div *ngIf="data.ITEM.length ==0 " style="top: -6px; position: relative">无数据</div>

              </div>
            </div>
          </ng-container>
        </apes-tab>
      </apes-tabset>
    </apes-collapse-panel>

  </apes-collapse>

</div>
